<template>
    <div class="pa-12">
        <div class="m-t-10">
            <el-tabs v-model="activeName">
                <el-tab-pane label="加注机信息" name="baseInfo">
                    <div class="flex-start m-t-20">
                        <key-value>
                            <template #key>加注机编号</template>
                            <template #value>{{ detail.macCode | defaultValue }}</template>
                        </key-value>
                        <key-value>
                            <template #key>加注机厂家</template>
                            <template #value>{{ detail.supplierName | defaultValue }}</template>
                        </key-value>
                    </div>
                    <div class="flex-start m-t-10">
                        <key-value>
                            <template #key>电磁阀</template>
                            <template #value>{{ detail.deviceName | defaultValue }}</template>
                        </key-value>
                        <key-value>
                            <template #key>灯光</template>
                            <template #value>{{ detail.deviceSecret | defaultValue }}</template>
                        </key-value>
                        <key-value>
                            <template #key>液位传感器</template>
                            <template #value>{{ detail.networkWay | networkWay }}</template>
                        </key-value>
                    </div>
                  <div class="flex-start">
                    <key-value>
                      <template #key>补液流量计</template>
                      <template #value>{{ detail.macVersion | defaultValue }}</template>
                    </key-value>
                  </div>
                  <div class="flex-start m-t-10" >
                        <key-value>
                            <template #key>销售单价</template>
                            <template #value>
                            </template>
                        </key-value>
                        <key-value>
                            <template #key>计量单位</template>
                            <template #value>{{ detail.solenoidValve | solenoidValve }}</template>
                        </key-value>
                      <key-value>
                        <template #key>尿素品牌</template>
                        <template #value>{{ detail.solenoidValve | solenoidValve }}</template>
                      </key-value>
                    </div>
                  <div class="flex-start" >
                    <key-value>
                      <template #key>流量计参数校准</template>
                      <template #value>{{ detail.solenoidValve | solenoidValve }}</template>
                    </key-value>
                    <key-value>
                      <template #key>设备待机界面属性</template>
                      <template #value>{{ detail.solenoidValve | solenoidValve }}</template>
                    </key-value>
                    <key-value>
                      <template #key>隐藏量（kg）</template>
                      <template #value>{{ detail.solenoidValve | solenoidValve }}</template>
                    </key-value>
                  </div>
                  <div class="flex-start" >
                    <key-value>
                      <template #key>桶高度(cm)</template>
                      <template #value>{{ detail.solenoidValve | solenoidValve }}</template>
                    </key-value>
                    <key-value>
                      <template #key>桶容量（kg）</template>
                      <template #value>{{ detail.solenoidValve | solenoidValve }}</template>
                    </key-value>
                    <key-value>
                      <template #key>灯光时间</template>
                      <template #value>{{ detail.solenoidValve | solenoidValve }}</template>
                    </key-value>
                  </div>
                  <div class="flex-start" >
                    <key-value>
                      <template #key>液位高度变化值（cm）</template>
                      <template #value>{{ detail.solenoidValve | solenoidValve }}</template>
                    </key-value>
                    <key-value>
                      <template #key>补液流量计参数校准</template>
                      <template #value>{{ detail.solenoidValve | solenoidValve }}</template>
                    </key-value>
                  </div>
                    <div class="flex-start m-t-10">
                      <key-value>
                        <template #key>运行模式</template>
                        <template #value>{{ detail.solenoidValve | solenoidValve }}</template>
                      </key-value>
                    </div>
                  <div class="m-t-20">
                    <el-button type="primary" size="small">确定</el-button>
                    <el-button size="small"  @click="back"  type="primary" plain>返回</el-button>
                  </div>
                    <div class="h-100px"></div>
                </el-tab-pane>
                <el-tab-pane label="安装记录" name="installRecords">
                    <el-table :data="installRecords" v-loading="installRecordsLoading" style="width: 100%" border
                              :header-cell-style="{background:'#eee',color:'#000'}">
                        <el-table-column type="index" align="center" label="序号" width="60"/>
                        <el-table-column prop="splitTime" label="安装/拆除时间" width="180"/>
                        <el-table-column prop="siteName" label="加注站名称"/>
                        <el-table-column prop="staffName" label="安装/拆除人员" width="200"/>
                        <el-table-column label="类型" width="100">
                            <template v-slot="scope">{{ scope.row.installType | installType }}</template>
                        </el-table-column>
                        <el-table-column label="备注">
                            <template v-slot="scope">{{ scope.row.remark | defaultValue }}</template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <div class="h-100px"></div>
            </el-tabs>

            <el-dialog title="下载二维码" append-to-body :visible.sync="showQrImgFlag" width="400px">
                <div class="flex-center">
                    <div></div>
                    <div id="qrBig" ref="qrBig"></div>
                    <div></div>
                </div>
                <div class="flex-center">
                    <div></div>
                    <el-button type="text" @click="downloadQrImg">下载</el-button>
                    <div></div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import KeyValue from "@/components/basic-block/key-value";

import QRCode from 'qrcodejs2';

import {equals, getRecords, getRespData, isListEmpty, isStringEmpty, msgError, msgSuccess} from "@/util/common-util";
import AppRadioGroup from "@/components/business/app-radio-group";
import {
    getDeviceNetworkSignal,
    getPage,
    getQRCode2,
    installRecordPage,
    saveOrUpdate,
    syncBasicAttrByMacCode
} from "@/api/business/filling-machine";
import DictValueDisplay from "@/components/business/dict-value-display";

export default {
    name: "filling-machine-detail-content",
    components: {DictValueDisplay, AppRadioGroup, KeyValue},
    props: {
        info: {
            type: Object,
            default: () => {
            }
        }
    },
    filters: {
        solenoidValve(v) {
            if (equals(v, 0)) return "无"
            if (equals(v, 1)) return "单阀"
            if (equals(v, 2)) return "双阀"
            return "未知"
        },
        networkWay(v) {
            if (equals(v, 0)) return "4G"
            if (equals(v, 1)) return "以太网"
            return "未知"
        },
        hasAdvert(v) {
            if (equals(v, 0)) return "无"
            if (equals(v, 1)) return "有"
            return "未知"
        },
        hasCard(v) {
            if (equals(v, 0)) return "无"
            if (equals(v, 1)) return "插卡式"
            if (equals(v, 2)) return "贴近式"
            return "未知"
        },
        displayScreen(v) {
            if (equals(v, 0)) return "无"
            if (equals(v, 1)) return "有"
            return "未知"
        },
        hasStorage(v) {
            if (equals(v, 0)) return "无"
            if (equals(v, 1)) return "有"
            return "未知"
        },
        hasSensor(v) {
            if (equals(v, 0)) return "无"
            if (equals(v, 1)) return "can型"
            if (equals(v, 2)) return "电流型"
            return "未知"
        },
        camera(v) {
            if (equals(v, 0)) return "无"
            if (equals(v, 1)) return "有"
            return "未知"
        },
        installType(v) {
            if (equals(v, 0)) return "安装"
            if (equals(v, 1)) return "拆除"
            return "未知"
        }
    },
    data() {
        return {
            syncLoading: false,
            qrUrl: null,
            detail: {},
            activeName: 'baseInfo',
            form: {
                id: '',
                ureaPrice: 0,
                macPrecision: 0,
                backchoice: 0,
                hiddenValue: 0,
                storagePrecision: 0,
                zeroVoflep: 0,
                lepchange: 0,
                endTemperature: 0,
                totalHeight: 0,
                totalCapacity: 0,
                concentrate: 0,
                ureaType: '',
                openTime: '',
                closeTime: '',
                units: 0, // 计量单位
                runType: '', // 运行模式
                macQrCode: null, // 二维码
            },
            saveLoading: false,
            qrLoading: false,
            showQrImgFlag: false,

            installRecords: [],
            installRecordsLoading: false,
            networkSignal: 0,
            page: {
                size: 20,
                current: 1
            },
            qr: null,
            total: 0,
        }
    },
    created() {
        this.init(this.info)
    },
    mounted() {
        if (!isStringEmpty(this.form.macQrCode)) {
            this.buildQr()
        }
    },
    methods: {
        init(info) {
            this.detail = info
            this.form.id = this.detail.id
            this.form.ureaPrice = this.detail.ureaPrice
            this.form.macPrecision = this.detail.macPrecision
            this.form.hiddenValue = this.detail.hiddenValue
            this.form.backchoice = this.detail.backchoice
            this.form.lepchange = this.detail.lepchange
            this.form.storagePrecision = this.detail.storagePrecision
            this.form.zeroVoflep = this.detail.zeroVoflep
            this.form.totalHeight = this.detail.totalHeight
            this.form.totalCapacity = this.detail.totalCapacity
            this.form.concentrate = this.detail.concentrate
            this.form.ureaType = this.detail.ureaType
            this.form.units = this.detail.units
            this.form.runType = this.detail.runType
            this.form.openTime = this.detail.openTime
            this.form.closeTime = this.detail.closeTime
            this.form.macQrCode = this.detail.macQrCode
            try {
                this.queryInstallRecordPage()
                this.getDeviceNetworkSignal()
            } catch (e) {
            }
        },
        syncDetail() {
            this.syncLoading = true
            syncBasicAttrByMacCode(this.detail.macCode).then(res => {
                msgSuccess("同步属性成功")
                getPage({isTrusted: true, queryStr: this.detail.macCode}).then(res => {
                    this.syncLoading = false
                    if (isListEmpty(res.data.data.records)) return
                    this.init(res.data.data.records[0])
                }).catch(() => {
                    this.syncLoading = false
                })
            }).catch(() => {
                this.syncLoading = false
            })
        },
        getDeviceNetworkSignal() {
            getDeviceNetworkSignal(this.detail.id).then(res => {
                this.networkSignal = getRespData(res).signal
            })
        },
        queryInstallRecordPage() {
            this.installRecordsLoading = true
            installRecordPage(this.page, {machineId: this.form.id}).then(res => {
                this.installRecordsLoading = false
                this.installRecords = getRecords(res)
            }).catch(() => {
                this.installRecordsLoading = false
            })
        },
        installRecordsPageChange(_page) {
            this.page = _page
            this.queryInstallRecordPage()
        },
        back() {
            this.$emit('back', true)
        },
        save() {
            this.saveLoading = true
            this.form.isPropertySetting = true
            saveOrUpdate(this.form).then(res => {
                this.saveLoading = false
                msgSuccess()
            }).catch(() => {
                this.saveLoading = false
            })
        },
        runTypeChange(v) {
            this.form.runType = v
        },

        buildQr() {
            if (this.qr != null) {
                this.qr.makeCode(this.form.macQrCode)
            } else {
                this.qr = new QRCode(this.$refs.qrCodeDiv, {
                    text: this.form.macQrCode,
                    width: 40,
                    height: 40,
                    colorDark: "#333333", //二维码颜色
                    colorLight: "#ffffff", //二维码背景色
                    correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
                })
            }
        },
        createQRCode() {
            this.qrLoading = true
            getQRCode2(this.form.id).then(res => {
                this.form.macQrCode = getRespData(res).macQrCode
                //
                this.buildQr()
                // if (isNull(res) || isNull(res.data) || res.data.size === 0) {
                this.qrLoading = false
                //   return msgError("生成二维码为空")
                // }
                // getBase64(res.data).then(base64 => {
                //   compressBase64(base64, 300, (newBase64) => {
                //     this.form.macQrCode = newBase64
                //     this.qrLoading = false
                //     msgSuccess()
                //   })
                // }).catch((err) => {
                //   msgError(err)
                //   this.qrLoading = false
                // })
            }).catch((err) => {
                msgError(err)
                this.qrLoading = false
            })
        },
        zoomInImg() {
            this.showQrImgFlag = true

            setTimeout(() => {
                if (this.qr2 == null) {
                    this.qr2 = new QRCode(this.$refs.qrBig, {
                        text: this.form.macQrCode,
                        width: 300,
                        height: 300,
                        colorDark: "#333333", //二维码颜色
                        colorLight: "#ffffff", //二维码背景色
                        correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
                    })
                }
            }, 400)
        },
        downloadQrImg() {
            // if (isStringEmpty(this.form.macQrCode)) return msgError("二维码无效")
            // downloadBase64File("加注机二维码.png", this.form.macQrCode)
            let dom = document.getElementById("qrBig")
            // 获取dom二维码图片的连接
            let url = dom.childNodes[1].src  //codeIMG  要下载的路径
            let link = document.createElement('a')
            // 这里是将url转成blob地址，
            fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
                link.href = URL.createObjectURL(blob)
                link.download = '二维码'
                document.body.appendChild(link)
                link.click()
            })
        }
    }
}
</script>

<style lang="scss" scoped>

.time-input {

::v-deep .el-date-editor {
    width: 120px;
}

  ::v-deep .el-input__inner {
    height: 20px;
}

}

.ercode {
    height: 40px;
    width: 40px;
}
</style>
